<template>
  	<div class="topUpDetail_container pr-1 pl-1">
		<div class="topUpDetail_container_card card_dis mb-1 br-16 padding-1"  @click="goSelectCurrency">
			<div class="topUpDetail_container_card_left">
				<img :src="currencyIcon" alt="">
				<span>{{ currencyName }}</span>
			</div>
			<img src="@/image/personalCenter/icon_arrow_you@1x.png" class="goImage" alt="">
		</div>
		<div class="topUpDetail_container_card card_dis card_work mb-1 br-16 padding-1"  @click="goSelectNetwork">
			<div class="topUpDetail_container_card_left">
				<div class="left_title">{{ $t("网络") }}</div>
				<span>{{ networkName }}</span>
			</div>
			<img src="@/image/personalCenter/icon_arrow_you@1x.png" class="goImage" alt="">
		</div>
		<div class="topUpDetail_container_card br-16 padding-1 mb-1">
			<div class="card_title mb-1">{{ $t("充值地址") }}:</div>
			<div class="card_address mb-2">
				<span> {{address}}</span>
				<img src="@/image/homePage/aiImageDetail/cope.png" @click="copyAddress" alt="">
			</div>
			<div class="card_top mb-1">
				<img :src="qrcode" class="mb-1" alt="">
			</div>
			<div class="card_bottom">
				<div class="card_bottom_item">
					<div class="card_bottom_item_left">{{ $t('最小充值额度') }}</div>
					<div class="card_bottom_item_right">{{minRecharge+' '+currencyName}}</div>
					<!-- <div class="card_bottom_item_left">{{ $t('充值到账') }}</div>
					<div class="card_bottom_item_right">{{''}}</div>
					<div class="card_bottom_item_left">{{ $t('合约信息') }}</div>
					<div class="card_bottom_item_right">{{''}}</div> -->
				</div>
			</div>
			
		</div>
		<div class="topUpDetail_container_card br-16 mb-1">
			<div class="card_content br-8 padding-1">
				<p class="rule_label">{{ $t("recharge_rule",{min:minRecharge,currency:currencyName,networkName:networkShortName}) }}</p>
			</div>
		</div>

		<button class="topUpDetail_container_copyAddressButton mb-1" @click="copyAddress">
          	{{ $t('复制地址') }}
        </button>
	</div>
</template>

<script>
import { clipboard } from '@/utils';
import QRCode from 'qrcode'
import { getRecharge, getRechargeDetail } from '@/request/personalCenter';
import BusinessUtils from '@/utils/business';
export default {
	name: 'TopUpDetail',
	data(){
		return {
			preSelectChannel: '',
			preSelectCurrency: '',
			preSelectNetwork: '',
			preChannelList: [],

			selectedChannel: '',
			selectedCurrency: '',
			selectedNetwork: '',

			channelList: [],
			addressNetworkList: [],
			
			address: '',
			qrcode: null,

		}
	},
	mounted(){
		this.initPreSelect();
		this.getRecharge();
	},

	activated(){
		
	},

	computed:{
		currencyIcon(){
			let channelInfo = this.channelList.find(item => item.id == this.selectedChannel);
			if(channelInfo){
				let currencyInfo = channelInfo.currencyList.find(item => item.id == this.selectedCurrency);
				if(currencyInfo){
					return BusinessUtils.getCoinIcon(currencyInfo.name);
				}
			}

			return null;
		},

		currencyName(){
			let channelInfo = this.channelList.find(item => item.id == this.selectedChannel);
			if(channelInfo){
				let currencyInfo = channelInfo.currencyList.find(item => item.id == this.selectedCurrency);
				if(currencyInfo){
					return currencyInfo.name;
				}
			}
			return '';
		},

		networkName(){
			let channelInfo = this.channelList.find(item => item.id == this.selectedChannel);
			if(channelInfo){
				let currencyInfo = channelInfo.currencyList.find(item => item.id == this.selectedCurrency);
				if(currencyInfo && currencyInfo.networkList && currencyInfo.networkList.length > 0){
					let networkInfo = currencyInfo.networkList.find(item => item.id == this.selectedNetwork);
					if(networkInfo){
						return networkInfo.name;
					}
				}
			}
			return '';
		},

		networkShortName(){
			let channelInfo = this.channelList.find(item => item.id == this.selectedChannel);
			if(channelInfo){
				let currencyInfo = channelInfo.currencyList.find(item => item.id == this.selectedCurrency);
				if(currencyInfo && currencyInfo.networkList && currencyInfo.networkList.length > 0){
					let networkInfo = currencyInfo.networkList.find(item => item.id == this.selectedNetwork);
					if(networkInfo){
						return networkInfo.shortName;
					}
				}
			}
			return '';
		},

		minRecharge(){
			let channelInfo = this.channelList.find(item => item.id == this.selectedChannel);
			if(channelInfo){
				let currencyInfo = channelInfo.currencyList.find(item => item.id == this.selectedCurrency);
				if(currencyInfo && currencyInfo.networkList && currencyInfo.networkList.length > 0){
					let networkInfo = currencyInfo.networkList.find(item => item.id == this.selectedNetwork);
					if(networkInfo){
						return Number(networkInfo.min).toFixed(2);
					}
				}
			}
			return '';
		},
	},
	methods: {
		initPreSelect(){
			let topUpSelectResult = sessionStorage.getItem('topUpSelectResult');
			if(topUpSelectResult){
				let params = JSON.parse(topUpSelectResult);
				if(params.channel){
					this.preSelectChannel = params.channel;
				}
				if(params.currency){
					this.preSelectCurrency = params.currency;
				}
				if(params.network){
					this.preSelectNetwork = params.network;
				}
				if(params.channelList){
					this.preChannelList = params.channelList;
				}
			}
		},

		onSelectBack(channelId, currencyId, networkId){
			this.preSelectChannel = channelId;
			this.preSelectCurrency = currencyId;
			this.preSelectNetwork = networkId;

			this.getRecharge();			
		},

		getRecharge(){
			if(this.preChannelList && this.preChannelList.length > 0){
				this.channelList = this.preChannelList;
				this.dipositPreSelect();
				this.getRechargeDetail();
			}else{
				getRecharge({}).then(res => {
					if(res.code == 1){
						let tempChannelList = []

						// 暂时后端没有通道，所以写死了只有一个id为1的通道
						let channelInfo = {}
						tempChannelList.push(channelInfo)
						channelInfo.id = 1

						channelInfo.currencyList = []
						for(let i = 0;i < res.data.icon_list.length;i++){
							let currencyData = res.data.icon_list[i]

							let currencyInfo = {}
							currencyInfo.id = currencyData.id
							currencyInfo.name = currencyData.name
							channelInfo.currencyList.push(currencyInfo)
						}

						for(let i = 0;i < res.data.recharge.length;i++){
							let networkData = res.data.recharge[i]

							let currencyInfo = channelInfo.currencyList.find(item => item.id == networkData.type)
							if(currencyInfo.networkList == undefined){
								currencyInfo.networkList = []
							}
							let networkInfo = {}
							networkInfo.id = networkData.id
							networkInfo.name = networkData.name
							networkInfo.currencyId = networkData.type
							networkInfo.min = networkData.min_total
							networkInfo.shortName = networkData.value

							currencyInfo.networkList.push(networkInfo)
						}

						this.channelList = tempChannelList;

						this.dipositPreSelect();
						this.getRechargeDetail();
					}else{
						this.$toast.fail(res.msg)
					}
					
				})
			}
		},

		getRechargeDetail(){
			if(this.selectedNetwork == ''){
				return;
			}

			let data = {}
			data.chainid = this.selectedNetwork;

			getRechargeDetail(data).then(res => {
				if(res.code == 1){
					this.address = res.data;
					QRCode.toDataURL(this.address).then(url => {
						this.qrcode = url;
					});
				}
			});
		},

		dipositPreSelect(){
			// 如果外部有选好的通道和货币，则使用外部选好的
			// 暂时后端没有通道，所以默认选择id为1的通道
			let foundCurrency = false;
			let channelInfo = this.channelList.find(item => item.id == this.preSelectChannel);
			if(channelInfo){
				let currencyInfo = channelInfo.currencyList.find(item => item.id == this.preSelectCurrency);
				if(currencyInfo){
					foundCurrency = true;
				}
			}

			if(foundCurrency){
				this.selectCurrency(this.preSelectChannel, this.preSelectCurrency);
			}else{
				this.selectCurrency(this.channelList[0].id, this.channelList[0].currencyList[0].id);
			}

			if(this.preSelectNetwork){
				let networkInfo = this.addressNetworkList.find(item => item.id == this.preSelectNetwork);
				if(networkInfo){
					this.selectedNetwork = networkInfo.id;
				}
			}else{
				this.selectedNetwork = this.addressNetworkList[0].id;
			}
		},

		selectCurrency(channelId, currencyId){
			if(channelId == this.selectedChannel && currencyId == this.selectedCurrency){
				return;
			}
			this.selectedChannel = channelId;
			this.selectedCurrency = currencyId;

			this.addressNetworkList = this.getNetworkList(channelId, currencyId);
		},

		getNetworkList(channelId, currencyId){
			let channelInfo = this.channelList.find(item => item.id == channelId);
			if(channelInfo){
				let currencyInfo = channelInfo.currencyList.find(item => item.id == currencyId);
				if(currencyInfo && currencyInfo.networkList && currencyInfo.networkList.length > 0){
					return currencyInfo.networkList;
				}
			}
			return [];
		},

		goSelectCurrency(){
			let params = {
				pageType: 'changeCurrency',
				channel: this.selectedChannel,
				currency: this.selectedCurrency,
				network: this.selectedNetwork
			};

			this.$router.push({name: 'TopUp' , params: params})
		},
		goSelectNetwork(){
			let params = {
				pageType: 'changeNetwork',
				channel: this.selectedChannel,
				currency: this.selectedCurrency,
				network: this.selectedNetwork
			};

			this.$router.push({name: 'TopUp' , params: params})
		},

		async copyAddress(){
			try {
				await clipboard.copy(this.address);
				this.$toast.success(this.$t('复制成功'));
			} catch {
				this.$toast.fail(this.$t('复制失败'));
			}
		}
	}
}
</script>

<style>

</style>